<!--分享弹窗-->
<template>
      <section class="dialog-more" v-if="isShow">
        <div class="bg" @click="back"></div>
        <div class="cont" @click.stop="">
          <div class="hd"><span>通知反馈</span> <div @click.stop="back" class="close">
            <i></i>
            <i></i>
          </div></div>
          <div class="line"></div>
          <div class="bd">
            <section class="pdv-9 pdh-4">
              <div class="text-block" @click="showType()">
                <div class="name color-default input-name"><i class="required color-red">*</i>反馈类型：</div>
                <div class="value"><input readonly v-model="typeLabel" type="text" placeholder="请选择反馈类型"></div>
              </div>

              <div v-if="showContent" class="input-row-wrap">
                <div class="name"><i class="required color-red">*</i>请假原因：</div>
                <textarea placeholder="请填写请假原因" v-model="content" name="" cols="20" rows="3"></textarea>
              </div>

              <div class="pdv-3"></div>
              <div class="default-block-btn" @click="submit()">提交</div>

              <div class="pdv-3"></div>

            </section>
          </div>
        </div>
      </section>
</template>

<script>
  import {Textarea} from 'cube-ui'
  export default {
    components: {Textarea},
    name: 'feedbackDialog',
    props: ['msgId', 'msgType'],
    data () {
      return {
        isShow: true,
        typeLabel: '',
        typeValue: '',
        feedTypes: [],
        showContent: false,
        content: '',
        excludeType: '0'
      }
    },
    created () {
      console.log('-----------msgType=', this.msgType)
      if (this.msgType !== 'zzsh') {
        this.excludeType = '0,2'
      }
      this.findDictList()
    },
    methods: {
      submit () {
        if (this.showContent && this.content === '') {
          return tools.tip('请填写请假原因！')
        }

        let data = {
           loginId: this.tools.getUserInfo().id,
//          loginId: '112029',
          msgId: this.msgId,
          feedInfo: this.content,
          feedType: this.typeValue
        }
        console.log("----------data=", data)
        this.fetchService.optSaveNodeMsg(data).then((res) => {
          if (res.code !== 0) {
            return tools.tip(res.message)
          }
          this.tools.tip('操作完成！')
          this.back()
        })
      },
      // 选择反馈类型
      showType () {
        this.$createActionSheet({
          title: '反馈类型',
          active: 10,
          data: this.feedTypes,
          onSelect: (item, index) => {
            this.typeLabel = item.content
            this.typeValue = item.scope
            if (this.typeValue === '2') {
              this.showContent = true
            } else {
              this.showContent = false
            }
            this.$forceUpdate()
          },
          onCancel: () => {
          }
        }).show()
      },
      findDictList () {
        this.feedTypes = []
        let data = {
          loginId: '3750',
          dictType: 'node_msg_feed_type',
          excludeType: this.excludeType
        }
        this.fetchService.findDictList(data).then(res => {
          if (res.code !== 0) {
            return tools.tip(res.message)
          }
          res.data.map((v) => {
            let types = {
              scope: v.value,
              content: v.label
            }
            this.feedTypes.push(types)
          })
          console.log('-------------feedTypes=', this.feedTypes)
        })
      },
      show () {
        this.isShow = true
      },
      back () {
        this.isShow = false
      }
    }
  }
</script>
<style scoped lang="scss">
  @import "@/common/stylus/moon.scss";

  .dialog-more {
    position: fixed;
    top:0;right:0;left:0;bottom:0;z-index: 99;
    .bg {
      @include fullImg();
      background:rgba(0,0,0,1);
      opacity:0.5;
    }
    .cont {
      position: absolute;
      top:50%;left:pxToRem(20px);right:pxToRem(20px);
      transform:translateY(-50%);
      background: #fff;
      border-radius:pxToRem(10px);
      padding: pxToRem(25px) pxToRem(40px) pxToRem(40px);
      .hd {
        font-size: pxToRem(30px);
        font-weight:400;
        color:rgba(51,51,51,1);
        display:flex;
        justify-content:space-between;
        align-items:center;
        .close {
          width:pxToRem(30px);
          height:pxToRem(30px);
          position: relative;
          transform:rotate(45deg);
          i {
            background:#999;
            position: absolute;
          }
          i:first-child {
            top:50%;
            left:0;
            margin-top:-1px;
            width:pxToRem(30px);
            height:2px;
          }
          i:last-child {
            top:0;
            left:50%;
            margin-left:-1px;
            height:pxToRem(30px);
            width:2px;
          }
        }
      }
      .line {
        margin: pxToRem(26px) 0 pxToRem(36px);
        width:100%;
        height:1px;
        background:rgba(0,0,0,1);
        opacity:0.1;
      }
      .bd {
        .title {
          font-size:$defaultFontSize;
        }
      }
    }
  }
</style>
